<template>
  <div>
    <h1>登录</h1>
    <van-cell-group>
      <el-form ref="from" :model="from" label-width="100px" class="password-form">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="from.phone" placeholder="请输入手机号" class="qq">
            <template #prefix>
              <i class="el-input__icon el-icon-mobile-phone"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="from.password" type="password" placeholder="请输入新密码"  class="qq">
            <template #prefix>
              <i class="el-input__icon el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toLogin()" class="submit-button">登录</el-button>
        </el-form-item>
      </el-form>
    </van-cell-group>
    <div style="margin-top: 410px;">
      <van-row type="flex" justify="space-around">
        <van-col @click="forgetPassword()" span="6">忘记密码</van-col>
        <van-col @click="toPassword()" span="6">使用验证码登录</van-col>
        <van-col @click="registerLogin()" span="6">还没账号我要注册...</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Toast} from "vant";

export default {
  data() {
    return {
      from: {
        phone: '',
        password: ''
      },
      verify: null, // 定义verify变量
      user: {},
      nid: 0
    }
  },
  methods: {
    toLogin(){
      Toast.loading({ message: '登录中...', forbidClick: true });
      axios.post("/user/user/toLoginPassword",this.from).then(res=>{
        if (res.data.code==200){
          this.user = res.data.data.user
          localStorage.setItem('user', JSON.stringify(this.user))
          this.$message.success(res.data.message)
          this.$router.push('/show')
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    forgetPassword() {
      // 这里可以添加忘记密码的逻辑，例如跳转到忘记密码页面
      this.$router.push('/updatepassword')
    },
    toPassword(){
      this.$router.push('/login')
    },
    registerLogin() {
      this.$router.push('/register')
    },
  },
  mounted() {

  }
}
</script>
<style scoped>
.qq{
  width: 80%;
  height: 50px;
  border-radius: 6px;
  transition: border-color 0.3s ease; /* 添加过渡效果 */
}
</style>
